<template>
  <div class="navleft" style="height: 100%">
    <el-menu
      default-active="3"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100%"
    >
      <template v-for="(item,index) in navList">
        <div v-if="item.children&&item.children.length>1" :key="item.path" >
          <el-submenu :index="index.toString()" :key="index">
         
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.meta.title}}</span>
            </template>
            <template v-for="(nav) in item.children">
              
                <el-menu-item :index="nav.path" :key="nav.path"  @click="jumpToPage(nav.path)" v-if="!nav.meta.hidden">
                 {{nav.meta.title}}
                  </el-menu-item>
                   
            </template>
          </el-submenu>
        </div>
        <div v-if="item.children&&item.children.length==1" :key='item.path'>
         
          <el-menu-item  @click="jumpToPage(item.path)" :index="index.toString()">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.meta.title}}</span>
          </el-menu-item>
        </div>
        
      </template>
    </el-menu>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class Modal extends Vue {
  navList: any[] | undefined= []
  mounted() {
    const routes = this["$router"].options.routes
    // console.log("===obj===")
    // console.log(obj)
    const roleListMenu = this.$store.state.roleMenList
   
    this.navList = routes.concat(roleListMenu)
    
  }
  private handleOpen(key: string, keyPath:Array<string>) {
    console.log(key, keyPath);
  }
  private handleClose(key: string, keyPath: Array<string>) {
    console.log(key, keyPath);
  }
  private jumpToPage(e:string){
    console.log(e)
    this.$router.push(e)
  }
}
</script>

<style lang="less" scoped>
.navleft {
  width: 250px;
  // position: fixed;
  min-height: 100vh;
}
</style>